<%--
  Created by IntelliJ IDEA.
  User: 舒俊容
  Date: 2023/12/19
  Time: 11:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册</title>
  <link rel="stylesheet" href="css/regsist.css">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/bootstrap-datepicker3.min.css">
<%--  <link rel="stylesheet" href="./css/mainn.css">--%>
</head>
<body>
<header class="header container">
  <div class="logo">校园论坛</div>
</header>
<div class="container">
  <h2 style="margin-top: 60px;">用户注册</h2>
  <hr style="margin-top: 20px; margin-bottom: 20px;">
  <form action="SignupServlet" method="post" id="signupForm">



    <div class="form-group">
      <label>账号<span class="text-danger">*</span></label>
      <input type="text" class="form-control"  name="account" placeholder="请输入账户" value="${param.account}" required>
      <p class="text-danger">${error_account}</p>
    </div>
    <div class="form-group">
      <label for="nickname">昵称<span class="text-danger">*</span></label>
      <input type="text" class="form-control"  id="nickname" name="nickname" placeholder="请输入名称" value="${param.nickname}" required>
      <p class="text-danger">${error_nickname}</p>
    </div>
    <div class="form-group">
      <label for="email">邮箱</label>
      <input type="email" class="form-control"  id="email" name="email" placeholder="请输入电子邮件" value="${param.email}" required>
      <p class="text-danger">${error_email}</p>
    </div>
    <div class="form-group">
      <label for="password"><span style="color: red;">*</span>密码<span class="text-danger">*</span></label>
      <input type="password" class="form-control"  id="password" name="password" placeholder="请输入密码" required>
    </div>
<%--    <div class="form-group">--%>
<%--      <label>生日</label>--%>
<%--      <input type="text" class="form-control"  id="datetimepicker" name="birthday" placeholder="请选择您的出生日期" value="${param.birthday}">--%>
<%--    </div>--%>
    <div class="form-group">
      <label for="mobile">手机号码<span class="text-danger">*</span></label>
      <input type="phone" class="form-control"  id="mobile" name="phone">
    </div>


    <div class="form-group">
      <label style="margin-top: 20px; margin-bottom: 20px;">头像</label>
      <input type="file" class="form-control"  id="file" name="file">
      <div>
        <!-- <label class="radio-inline">
            <input type="radio" name="photo" checked><img src="img/p1.jpg" class="img-circle" width="60px">
        </label>
        <label class="radio-inline">
            <input type="radio" name="photo"><img src="img/p1.jpg" class="img-circle" width="60px">
        </label>
        <label class="radio-inline">
            <input type="radio" name="photo" ><img src="img/p1.jpg" class="img-circle" width="60px">
        </label>
        <label class="radio-inline">
            <input type="radio" name="photo" ><img src="img/p1.jpg" class="img-circle" width="60px">
        </label> -->
      </div>
    </div>

    <div class="form-group">
      <button type="submit">注册</button>
    </div>
    <div class="form-group">
      注册本系统即代表您同意<a href="#">服务条款</a>
    </div>
  </form>
  <hr>
  <p>已有账号？<a href="login.jsp">点击这里登录</a></p>
</div>


<script>
  $().ready(function () {
    $('#signupForm').validate({
      rules: {
        account: 'required',
        nickname: 'required',
        password: {
          required: true,
          minlength: 6
        },
        mobile: {
          required: true,
          isPhone: true
        },
        email: 'email'
      },
      messages: {
        account: {
          required: '账户不能为空'
        },
        nickname: {
          required: '昵称不能为空'
        },
        password: {
          required: '密码不能为空',
          minlength: '密码长度不安全（至少6位）'
        }
      },
      errorElement: "em",
      errorPlacement: function (error, element) {
        // 给错误元素增加`text-danger` class 样式
        error.addClass("text-danger");

        // Add `has-feedback` class to the parent div.form-group
        // in order to add icons to inputs
        element.parents(".col-sm-5").addClass("has-feedback");

        if (element.prop("type") === "checkbox") {
          error.insertAfter(element.parent("label"));
        } else {
          error.insertAfter(element);
        }

        // Add the span element, if doesn't exists, and apply the icon classes to it.
        if (!element.next("span")[0]) {
          $("<span class='glyphicon glyphicon-remove form-control-feedback'></span>").insertAfter(element);
        }
      }
    });

    // // 设置日期选择器
    // $('#datetimepicker').datepicker({
    //   language: 'zh-CN', //语言
    //   clearBtn: true,//清除按钮
    //   format: "yyyy-mm-dd"//日期格式
    // });
  });

  // 增加自定义手机号码验证
  $.validator.addMethod("isPhone", function (value, element) {
    var length = value.length;
    var mobile = /^1[3456789]\d{9}$/;
    return this.optional(element) || (length == 11 && mobile.test(value));
  }, "请正确填写您的联系电话");
</script>

</body>
</html>